<template>
  <div class="kr-collapse">
    <el-collapse v-model="activeNames">
      <el-collapse-item title="页面参数" name="1">
        <page />
      </el-collapse-item>
      <el-collapse-item title="样式" name="2">
        <appearance class="pd-l-10" />
      </el-collapse-item>
      <el-collapse-item title="组件" name="3">
        <options />
      </el-collapse-item>
      <el-collapse-item title="已加组件" name="4">
        <layers />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import page from "./page.vue";
import appearance from "./appearance.vue";
import options from "./options/index.vue";
import layers from "./layers.vue";
import { defineComponent } from "vue-demi";

export default defineComponent({
  name: "panel",
  components: {
    page,
    appearance,
    options,
    layers,
  },
  setup() {
    return {
      activeNames: ["1", "2", "3", "4"],
    };
  },
});
</script>
